<template>
  <!-- 上传 action上传地址  headers上传请求头 name上传文件字段名 on-success   v-model="formData.directory_icon"-->
  <div>
    <el-upload
      name="file"
      action="#"
      :http-request="httpRequest"
      :before-upload="beforeUpload"
      :on-remove="onRemove"
      :on-preview="onPreview"
      :file-list="fileList"
      list-type="picture-card"
      :class="{ disabled: fileList.length === 1 }"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog append-to-body title="预览图片" :visible.sync="showDialog">
      <img :src="imgUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import COS from 'cos-js-sdk-v5'
import { uploadImage } from '../../../../api/user-admin'
export default {
  name: 'UploadImage',

  data() {
    return {
      // fileList: this.value ? [{ url: `http://124.223.14.236:7005/` + this.value }] : []
      fileList: [],
      showDialog: false,
      imgUrl: ''
    }
  },

  methods: {
    // 删除图片
    onRemove() {
      this.fileList = [],
        this.$emit('input', '')
    },
    // 图片预览
    onPreview(val) {
      console.log(val);
      this.imgUrl = val.url
      this.showDialog = true
    },
    // 上传成功
    // onSuccess(val) {
    //   console.log(val);
    // },

    // 自定义上传
    async httpRequest({ file }) {
      // 先创建一个file对象转成base64的方法,然后下面调用这个方法
      function imgbase(file) {
        // new 一个Promise实例
        return new Promise((resolve) => {
          // 对文件对象的处理
          var reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = function () {
            resolve(this.result);
          };
        });
      }
      // 在这里来调用函数
      const img = await imgbase(file);
      // 打印img
      // console.log(img);

      const res = await uploadImage({
        file: img,
        filename: "icon.png"
      })
      // console.log(res);
      this.imgUrl = `http://124.223.14.236:7005/` + res.url
      this.$emit('input', res.url)
      this.fileList = [{ url: `http://124.223.14.236:7005/` + res.url }]
      // console.log(file);
      // //方法2. 调用第三方腾讯云上传
      // // 1.实列化cos
      // const cos = new COS({
      //   SecretId: 'AKIDbN8oMYgKrnhXIvR2Z4Tm0LZvJbklDoKl',
      //   SecretKey: 'Sq1893pTfoFbr2jJmXAf2KYggY8bxCMQ'
      // }) //完成cos对象的初始化
      // // 2.调用cos
      // cos.putObject({
      //   Bucket: 'xiaoming-1318021388', /* 填入您自己的存储桶，必须字段 */
      //   Region: 'ap-nanjing',  /* 存储桶所在地域，例如ap-beijing，必须字段 */
      //   Key: file.name,  /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */
      //   Body: file, /* 必须，上传文件对象，可以是input[type="file"]标签选择本地文件后得到的file对象 */
      //   onProgress: (progressData) => {
      //     console.log(JSON.stringify(progressData));
      //   }
      // }, (err, data) => {
      //   if (err) return this.$message('上传失败')
      //   this.$emit('input', 'http://' + data.Location)
      // });



      // // 方法3.原来的图片上传,(不需要转码)  实列fd
      // const fd = new FormData()
      // // 2注入文件信息
      // fd.append('file', file)
      // // 发生请求
      // const res = await uploadImage(fd)//传入fd实列
      // // console.log(res);
      // // 4.将服务器返回的存储地址给图片
      // console.log(res, 11)
      // this.$emit('input', res.url)
      // // 5.将本地地址替换成线上地址
      // this.fileList = [{ url: `http://124.223.14.236:7005/` + res.url }]

    },
    // 上传前
    beforeUpload(file) {
      // console.log(file);
      // 检查大小 1G = 1024MB 1MB = 1024KB 1KB = 1024B
      if ((file.size / 1024 / 1024) > 2) {
        this.$message.warning('体积不允许超过2M')
        return false
      }
      // 检查类型
      const typeList = ['image/png', 'image/jpeg', 'image/gif']
      if (!typeList.includes(file.type)) {
        this.$message.warning('格式不正确')
        return false
      }
      console.log(file)
      // 通过了
      return true
    }
  }
}
</script>

<style lang="scss" scoped>
.disabled {
  ::v-deep .el-upload--picture-card {
    display: none;
  }
}
</style>